<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <h1>hello world</h1>
    <div id="app">
        <h3>v-for学习，介绍山西食物</h3>
        <ul>
            <li v-for="e in getFilFood" :key="e.id">{{e.id}}, {{e.name}}</li>
        </ul>
        <br/><br/>
        <button @click="addFood">点击，在首部添加一道山西食物</button>
        <h3>监视属性 ==> {{unWatchField.num}}</h3>
        <button @click="addField">点击，添加能被监视属性</button> &nbsp;&nbsp; <button @click="unWatchField.num++">点击+1</button>
        <h3>测试新数组赋值，filter</h3>
        <button @click="filNoodle()">点击，获取所有面食</button>
        <br/><br/>
        <h3>测试filter + sorted</h3>
        {{sortStatus}}
        <button @click="sortStatus=1">点击，将食物按照编号升序排列</button>
        <button @click="sortStatus=2">点击，将食物按照编号升序排列</button>
        <button @click="sortStatus=0">点击，将食物按照原顺序排列</button>
        <br/><br/>
        <h3>set方法为数组赋值成功</h3>
        <ul>
            <li v-for="e in vfood" :key="e.id">{{e.id}}, {{e.name}}</li>
        </ul>
        <button @click="addFoodByset">set方法为数组下标1赋值成功</button>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    Vue.config.devtools = true;
    const vm = new Vue({
        el:'#app',
        data: {
            num: 0,
            bidsty: {
                border: 'solid 1px',
                height: '10px',
                width:  '10px',
            },
            food: [
                {id: '004', name: '麻辣拌'},
                {id: '002', name: '牛肉丸子面'},
                {id: '001', name: '酥肉臊子面'},
                {id: '003', name: '阳高杏脯'}
            ],
            vfood: [],
            unWatchField: {},
            keyword: '',
            sortStatus: 0 // 0：原顺序，1:升序，2：降序
        },
        methods: {
            addFood() {
                this.food.unshift({id: '004', name: '大同刀削面'});
            },
            addField() {
                console.log('添加了属性');
                Vue.set(this.unWatchField, 'num', 1);
            },
            filNoodle() {
                this.keyword = '面';
            },
            addFoodByset() {
                // this.vfood.splice(1, 0, {id: '003', name: '新疆大盘鸡'}) // 插入一个元素
                // Vue.set(this.vfood,0,{id: '003', name: '新疆大盘鸡'});
                vm.$set(this.vfood,0,{id: '003', name: '新疆大盘鸡'})
                console.log("执行");
            }
        },
        computed: {
            getFilFood: {
                immediate: true,
                get() {
                    const curArr =  this.food.filter((e) => {
                        return e.name.indexOf(this.keyword) !== -1;
                    });
                    if(this.sortStatus) {
                        curArr.sort((a, b) => {
                            if(this.sortStatus === 1) {
                                return a.id.localeCompare(b.id);
                            } else {
                                return b.id.localeCompare(a.id);
                            }
                        })
                    }
                    return curArr;
                }
            }
        }
    })
    console.log(vm);
</script>
</html>